import React from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Pagination, Switch } from 'antd';
import { PAGE_NUM, PAGE_SIZE } from '@/constants'
import { toThousands } from '@/utils/util'
import style from './index.less';
import TimeInterval from '@/components/TimeInterval'

class BlockList extends React.Component {
  constructor(props) {
    super(props);
    this.pageChangeHandler = this.pageChangeHandler.bind(this);
    this.update = this.update.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  pageChangeHandler(page) {
    this.props.dispatch({
      type: 'blockList/fetch',
      payload: { page : page, size: PAGE_SIZE }
    });
  }

  update() {
    this.props.dispatch({
      type: 'blockList/fetch',
      payload: { page : PAGE_NUM, size: PAGE_SIZE }
    });
    let timeoutId = setTimeout(this.update, 3000);
    this.props.dispatch({
      type: 'blockList/setTimeoutId',
      payload: { timeoutId }
    })
  }

  onChange(checked) {
    this.props.dispatch({
      type: 'blockList/setChecked',
      payload: { checked }
    });
    if ( checked ) {
      this.update();
    } else {
      this.props.dispatch({
        type: 'blockList/setTimeoutId',
        payload: { timeoutId: null }
      });
    }
  }

  componentDidMount() {
    if (this.props.checked) {
      this.update();
    }
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'blockList/setTimeoutId',
      payload: { timeoutId: null }
    });
  }

  render(){
    const columns = [
      {
        title: '高度',
        align: 'center',
        width: '100px',
        dataIndex: 'height',
        key: 'height',
        render: (text, record) => <Link to={`/block/${record.height}`}>{toThousands(text)}</Link>,
      },
      {
        title: '出块者',
        align: 'left',
        ellipsis: true,
        dataIndex: 'miner',
        key: 'miner',
        render: (miner) =>
          miner.known ? <span><img src={miner.logoUrl} alt={miner.address} height='20px' width='20px'/>{' '+ miner.name}</span> : miner.address,
      },
      {
        title: '时间',
        width: '120px',
        align: 'right',
        dataIndex: 'timeDiff',
        key: 'timeDiff',
        render: (text) => <TimeInterval past={text} beginTime={Date.now()}/>
      },
      {
        title: '交易数',
        align: 'center',
        width: '60px',
        dataIndex: 'transactionCount',
        key: 'transactionCount',
        render: (text, record) => <Link to={`/block/${record.hash}`}>{toThousands(text)}</Link>,
      },
      {
        title: '块哈希',
        align: 'center',
        ellipsis: true,
        dataIndex: 'hash',
        key: 'hash',
        render: (text, record) => <Link to={`/block/${record.hash}`}>{text}</Link>,
      },
    ];

    return (
      <div className={style.normal}>
        <div className={style.title}>
          <span>最新区块</span>
        </div>
        <div className={style.btn}>
          <Switch checkedChildren="自动更新" unCheckedChildren="自动更新" defaultChecked={this.props.checked} onChange={this.onChange} />
        </div>
        <Table
          columns={columns}
          dataSource={this.props.list}
          rowKey={record => record.hash}
          pagination={false}
          size='small'
          bordered
        />
        <Pagination
          className="ant-table-pagination"
          total={this.props.total}
          current={this.props.page}
          pageSize={PAGE_SIZE}
          onChange={this.pageChangeHandler}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  const { list, total, page, checked } = state.blockList;
  return {
    loading: state.loading.models.blockList,
    list,
    total,
    page,
    checked,
  };
}

export default connect(mapStateToProps)(BlockList);
